<template>
    <div>
        <el-card class="box-card">
            <el-tabs v-model="activeName">
                <el-tab-pane label="系统配置" name="system">
                    <el-form
                        :model="systemList"
                        ref="addFormRef"
                        label-width="120px"
                        hide-required-asterisk
                    >
                        <template v-for="item in systemList" :key="item.id">
                            <el-form-item
                                :label="item.name"
                                align="left"
                                v-if="item.value_type == 1"
                            >
                                <el-tooltip
                                    :enterable="false"
                                    effect="dark"
                                    :content="item.describe"
                                    placement="bottom-end"
                                >
                                    <el-input v-model="item.value"> </el-input>
                                </el-tooltip>
                            </el-form-item>
                            <el-form-item
                                :label="item.name"
                                align="left"
                                v-if="item.value_type == 2"
                            >
                                <el-tooltip
                                    :enterable="false"
                                    effect="dark"
                                    :content="item.describe"
                                    placement="bottom-end"
                                >
                                    <el-input
                                        v-model="item.value"
                                        :autosize="{ minRows: 2, maxRows: 4 }"
                                        type="textarea"
                                    >
                                    </el-input>
                                </el-tooltip>
                            </el-form-item>
                            <el-form-item
                                :label="item.name"
                                align="left"
                                v-if="item.value_type == 3"
                            >
                                <el-tooltip
                                    :enterable="false"
                                    effect="dark"
                                    :content="item.describe"
                                    placement="bottom-end"
                                >
                                    <el-upload
                                        class="avatar-uploader"
                                        action="http://lx2.com/admin/resource/uploadImg"
                                        :show-file-list="false"
                                        :on-success="
                                            (res, fileList) =>
                                                handleAvatarListSuccess(
                                                    res,
                                                    fileList,
                                                    item
                                                )
                                        "
                                    >
                                        <img
                                            v-if="item.img_url"
                                            :src="item.img_url"
                                            class="avatar"
                                        />
                                        <el-icon
                                            v-else
                                            class="avatar-uploader-icon"
                                        >
                                            <plus />
                                        </el-icon>
                                    </el-upload>
                                </el-tooltip>
                            </el-form-item>
                            <el-form-item
                                :label="item.name"
                                align="left"
                                v-if="item.value_type == 4"
                            >
                                <el-tooltip
                                    :enterable="false"
                                    effect="dark"
                                    :content="item.describe"
                                    placement="bottom-end"
                                >
                                    <el-upload
                                        action="http://lx2.com/admin/resource/uploadFile"
                                        :show-file-list="false"
                                        :on-success="
                                            (res, fileList) =>
                                                handleFileSuccess(
                                                    res,
                                                    fileList,
                                                    item
                                                )
                                        "
                                    >
                                        <el-row>
                                            <el-col :span="20">
                                                {{ item.value }}
                                            </el-col>
                                            <el-col :span="4">
                                                <el-button
                                                    class="file-button"
                                                    type="primary"
                                                >
                                                    上传文件
                                                </el-button>
                                            </el-col>
                                        </el-row>
                                    </el-upload>
                                </el-tooltip>
                            </el-form-item>
                        </template>

                        <el-form-item align="left">
                            <el-button type="primary" @click="subSystemUpdate">
                                保存
                            </el-button>
                        </el-form-item>
                    </el-form>
                </el-tab-pane>
                <el-tab-pane label="支付配置" name="config">
                    支付配置相关
                </el-tab-pane>
            </el-tabs>
        </el-card>
    </div>
</template>

<script>
import requestApis from '@/request'
import zhCn from 'element-plus/lib/locale/lang/zh-cn'
import { path } from '@/constant'
import { Plus } from '@element-plus/icons'
export default {
    components: {
        Plus
    },
    data () {
        return {
            activeName: 'system',
            imageUrl: '',
            fileList: [],
            configList: [],
            systemList: []
        }
    },
    created () {
        this.getSystemList()
    },
    methods: {
        handleFileSuccess (res, file, item) {
            item.value = res.data.original_url
            this.setStatus(res.data.code)
        },
        handleAvatarListSuccess (res, file, item) {
            item.img_url = URL.createObjectURL(file.raw)
            item.value = res.data.original_url
            this.setStatus(res.data.code)
        },
        setStatus (code) {
            requestApis.setResourceStatus({ code }).then(res => {
                if (res.meta.code === 1) {
                } else {
                    this.$message({
                        message: res.meta.msg,
                        type: 'warning'
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        getSystemList () {
            requestApis.getCategoryConfig({ category: 'system' }).then(res => {
                if (res.meta.code === 1) {
                    res.data.forEach(item => {
                        if (item.value_type === 3) {
                            item.img_url = path.baseImgUrl + item.value
                        }
                    })
                    this.systemList = res.data
                } else {
                    this.$message({
                        message: res.meta.msg,
                        type: 'warning'
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        },
        subSystemUpdate () {
            requestApis.saveCategoryConfig({ config_list: JSON.stringify(this.systemList) }).then(res => {
                if (res.meta.code === 1) {
                    this.$message({
                        message: res.meta.msg,
                        type: 'success'
                    })
                    this.getSystemList()
                } else {
                    this.$message({
                        message: res.meta.msg,
                        type: 'warning'
                    })
                }
            }).catch(error => {
                console.log(error)
            })
        }
    }
}
</script>

<style>
.el-row {
    margin-bottom: 15px;
}
.avatar-uploader {
    width: 260px;
}
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader .el-upload:hover {
    border-color: #409eff;
}
.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    text-align: center;
}
.avatar-uploader-icon svg {
    margin-top: 74px; /* (178px - 28px) / 2 - 1px */
}
.avatar {
    width: 178px;
    display: block;
}
.el-form-item {
    width: 50%;
}
.file-button {
    margin-left: 15px;
}
</style>
